<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script src="../js/vue.js"></script>
	<script src="../js/axios.min.js"></script>
	<!-- 引入IDcss.css -->
	<link rel="stylesheet" type="text/css" href="./IDcss.css"></link>
	<title>证件</title>
</head>

<body>
	<div id="app">
		<table>
			<caption>
				<b>证件</b>
			</caption>
			<tr>
				<th class="th"><span>昵称:</span></th>
				<td>
					<input type="text" v-model="name" class="text" />
				</td>
			</tr>
			<tr>
				<th><span>真实姓名:</span></th>
				<td>
					<input type="text" v-model="userName" class="text" />
				</td>
			</tr>
			<tr>
				<th class="th"><span>所在地:</span></th>
				<td>
					<select v-model="addressuser">
						<option v-for="item in address" :value="item.id">{{item.value}}</option>
					</select>
					<select v-model="districtuser">
						<option v-if="item.aid == addressuser" v-for="item in district" :value="item.id">{{item.value}}
						</option>
					</select>
				</td>
			</tr>
			<tr>
				<th><span>性别:</span></th>
				<td>
					<label v-for="item in sex"><input type="radio" v-model="sexuser" :value="item.id" class="radio" />{{item.value}}</label>
				</td>
			</tr>
			<tr>
				<th class="th"><span>证件类型:</span></th>
				<td>
					<select v-model="IDTypeuser" class="IDTypeuser">
						<option v-for="item in IDType" :value="item.id">{{item.value}}</option>
					</select>
				</td>
			</tr>
			<tr>
				<th><span>证件号码:</span></th>
				<td>
					<input type="text" v-model="IDNumber" class="text" />
				</td>
			</tr>
			<tr>
				<td colspan="2" class="sub">
					<button @click="sub()" class="subBut">保存</button>
				</td>
			</tr>
		</table>
	</div>
</body>

<script>
	new Vue({
		el: '#app',
		data: {
			name: '',
			userName: '',
			addressDistrict: [
				{ aid: 1, cid: 1 },
				{ aid: 2, cid: 8 },
				{ aid: 3, cid: 14 },
				{ aid: 4, cid: 20 },
				{ aid: 5, cid: 26 },
			],
			addressuser: 1,
			address: [
				{ id: 1, value: '北京' },
				{ id: 2, value: '上海' },
				{ id: 3, value: '深圳' },
				{ id: 4, value: '广州' },
				{ id: 5, value: '长沙' },
			],
			districtuser: 1,
			district: [
				{ id: 1, aid: 1, value: '东城' },
				{ id: 2, aid: 1, value: '西城' },
				{ id: 3, aid: 1, value: '密云' },
				{ id: 4, aid: 1, value: '通州' },
				{ id: 5, aid: 1, value: '朝阳' },
				{ id: 6, aid: 1, value: '丰台' },
				{ id: 7, aid: 1, value: '石景山' },

				{ id: 8, aid: 2, value: '黄浦' },
				{ id: 9, aid: 2, value: '卢湾' },
				{ id: 10, aid: 2, value: '徐汇' },
				{ id: 11, aid: 2, value: '长宁' },
				{ id: 12, aid: 2, value: '静安' },
				{ id: 13, aid: 2, value: '普陀' },

				{ id: 14, aid: 3, value: '宝安' },
				{ id: 15, aid: 3, value: '福田' },
				{ id: 16, aid: 3, value: '龙岗' },
				{ id: 17, aid: 3, value: '盐田' },
				{ id: 18, aid: 3, value: '龙华' },
				{ id: 19, aid: 3, value: '坪山' },

				{ id: 20, aid: 4, value: '番禺' },
				{ id: 21, aid: 4, value: '花都' },
				{ id: 22, aid: 4, value: '从化' },
				{ id: 23, aid: 4, value: '增城' },
				{ id: 24, aid: 4, value: '天河' },
				{ id: 25, aid: 4, value: '南沙' },

				{ id: 26, aid: 5, value: '芙蓉' },
				{ id: 27, aid: 5, value: '天心' },
				{ id: 28, aid: 5, value: '岳麓' },
				{ id: 29, aid: 5, value: '开福' },
				{ id: 30, aid: 5, value: '望城' },
				{ id: 31, aid: 5, value: '雨花' },
			],
			sexuser: 1,
			sex: [
				{ id: 1, value: '男' },
				{ id: 2, value: '女' },
				{ id: 3, value: '保密' },
			],
			IDTypeuser: 1,
			IDType: [
				{ id: 1, value: '身份证' },
				{ id: 2, value: '护照' },
				{ id: 3, value: '港澳通行证' },
				{ id: 4, value: '台湾通行证' },
				{ id: 6, value: '军官证' },
			],
			IDNumber: ''
		},
		watch: {
			addressuser(newVal) {
				this.setFirstDistrict(newVal);
			}
		},
		methods: {
            sub() {
				const addressValue = this.address.find(a => a.id === this.addressuser)?.value || '';
                const districtValue = this.district.find(d => d.id === this.districtuser)?.value || '';
                const sexValue = this.sex.find(s => s.id === this.sexuser)?.value || '';
                const IDTypeValue = this.IDType.find(i => i.id === this.IDTypeuser)?.value || '';

                const dataToSave = {
                    name: this.name,
                    userName: this.userName,
                    address: addressValue,
                    district: districtValue,
                    sex: sexValue,
                    IDType: IDTypeValue,
                    IDNumber: this.IDNumber
                };

                console.log(dataToSave); // 这里可以替换为实际的保存逻辑，比如发送到服务器
            },
            setFirstDistrict(addressId) {
                const firstDistrict = this.district.find(d => d.aid === addressId);
                if (firstDistrict) {
                    this.districtuser = firstDistrict.id;
                } else {
                    this.districtuser = 0; // 或者其他默认值
                }
            }
        }
	})
</script>

</html>